<template>
  <div class="datauser">
      <data-top @timeFrame="timeFrame"></data-top>
      <div class="dataUserMain">
         <el-card shadow="never">
            <el-row :gutter="20">
              <el-col :span="7">
              <one-data :pullTime=pullTime></one-data>
              </el-col>
              <el-col :span="9">
                <two-data :pullTime=pullTime></two-data>
              </el-col>
              <el-col :span="8">
                <three-data :pullTime=pullTime></three-data>
              </el-col>

            </el-row>
            <div style="height:80px"></div>

              <el-row>
                <el-col :span="24">
                  <four-data></four-data>
                </el-col>
              </el-row>
         </el-card>
      </div>
  </div>
</template>

<script>
import dataTop from './childern/dataTop.vue'
import oneData from './childern/oneData.vue'
import twoData from './childern/twoData.vue'
import threeData from './childern/threeData.vue'
import fourData from './childern/fourData.vue'
export default {
  data () {
    return {
      pullTime: []
    }
  },
  methods: {
    timeFrame (value) {
      this.pullTime = value
    }
  },
  components: {
    dataTop,
    oneData,
    twoData,
    threeData,
    fourData
  }
}
</script>

<style lang="less" scoped>
.datauser{
  width: 100%;
  margin: 24px;
  .dataUserMain{
    margin-top: 20px;
  }
}
</style>
